<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevTools - 在线开发者工具集合</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <link rel="stylesheet" href="assets/css/main.css">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="gradient-bg text-white">
    <div class="container mx-auto px-4 py-12">
        <div>
            <h1 class="text-4xl font-bold">DevTools</h1>
            <p class="mt-2 text-xl opacity-90">一站式开发者工具集合</p>
        </div>
    </div>
</div>

<div class="container mx-auto px-4 py-8 -mt-8">
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="md:flex">
            <!-- Sidebar -->
            <div class="md:w-1/4 bg-gray-50 p-6 border-r border-gray-200">
                <div class="mb-6">
                    <div class="relative">
                        <input id="search-input" type="text" placeholder="搜索工具..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <i data-feather="search" class="absolute left-3 top-3 text-gray-400"></i>
                    </div>
                </div>
                <!-- 分类过滤按钮 -->
                <div class="mb-4">
                    <div class="grid grid-cols-2 gap-1 bg-gray-100 rounded-lg p-1">
                        <button id="filter-all" class="filter-btn px-3 py-2 text-sm rounded-md transition-colors duration-200 bg-blue-500 text-white" data-filter="all">
                            全部
                        </button>
                        <button id="filter-favorite" class="filter-btn px-3 py-2 text-sm rounded-md transition-colors duration-200 text-gray-600 hover:bg-gray-200" data-filter="favorite">
                            常用
                        </button>
                    </div>
                </div>

                <h3 class="text-lg font-semibold text-gray-700 mb-3">
                    <i data-feather="database" class="w-5 h-5 inline mr-2"></i>数据处理
                </h3>
                <ul class="space-y-1 mb-6 tool-category" data-category="data">
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 active-tool text-sm" data-tool="json-formatter" data-favorite="true"><i data-feather="code" class="mr-3 w-4 h-4"></i> JSON 格式化</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="sql-generator" data-favorite="true"><i data-feather="database" class="mr-3 w-4 h-4"></i> SQL IN 生成器</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="sql-formatter"><i data-feather="align-left" class="mr-3 w-4 h-4"></i> SQL 格式化</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="xml-formatter"><i data-feather="file-text" class="mr-3 w-4 h-4"></i> XML 格式化</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="css-formatter"><i data-feather="code" class="mr-3 w-4 h-4"></i> CSS 格式化</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="markdown-preview"><i data-feather="file-text" class="mr-3 w-4 h-4"></i> Markdown 预览</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="code-formatter" data-favorite="true"><i data-feather="code" class="mr-3 w-4 h-4"></i> 代码格式化</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="text-deduplicator" data-favorite="true"><i data-feather="list" class="mr-3 w-4 h-4"></i> 文本去重排序</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="text-diff"><i data-feather="git-branch" class="mr-3 w-4 h-4"></i> 文本差异对比</a></li>
                </ul>

                <h3 class="text-lg font-semibold text-gray-700 mb-3">
                    <i data-feather="refresh-cw" class="w-5 h-5 inline mr-2"></i>编码转换
                </h3>
                <ul class="space-y-1 mb-6 tool-category" data-category="encoding">
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="base64-encoder" data-favorite="true"><i data-feather="lock" class="mr-3 w-4 h-4"></i> Base64 编解码</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="url-encoder"><i data-feather="link" class="mr-3 w-4 h-4"></i> URL 编解码</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="timestamp-converter" data-favorite="true"><i data-feather="clock" class="mr-3 w-4 h-4"></i> 时间戳转换</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="rmb-converter"><i data-feather="dollar-sign" class="mr-3 w-4 h-4"></i> 人民币转换</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="hash-generator"><i data-feather="hash" class="mr-3 w-4 h-4"></i> 哈希生成</a></li>
                </ul>

                <h3 class="text-lg font-semibold text-gray-700 mb-3">
                    <i data-feather="tool" class="w-5 h-5 inline mr-2"></i>开发工具
                </h3>
                <ul class="space-y-1 mb-6 tool-category" data-category="development">
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="uuid-generator" data-favorite="true"><i data-feather="shuffle" class="mr-3 w-4 h-4"></i> UUID生成器</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="password-generator" data-favorite="true"><i data-feather="shield" class="mr-3 w-4 h-4"></i> 密码生成器</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="jwt-parser"><i data-feather="key" class="mr-3 w-4 h-4"></i> JWT 解析</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="http-status"><i data-feather="globe" class="mr-3 w-4 h-4"></i> HTTP 状态码</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="regex-tester"><i data-feather="search" class="mr-3 w-4 h-4"></i> 正则测试器</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="api-tester" data-favorite="true"><i data-feather="send" class="mr-3 w-4 h-4"></i> API 测试器</a></li>
                </ul>

                <h3 class="text-lg font-semibold text-gray-700 mb-3">
                    <i data-feather="smartphone" class="w-5 h-5 inline mr-2"></i>实用工具
                </h3>
                <ul class="space-y-1 mb-6 tool-category" data-category="utility">
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="qr-code" data-favorite="true"><i data-feather="grid" class="mr-3 w-4 h-4"></i> 二维码工具</a></li>
                    <li><a href="#" class="sidebar-tool flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100 text-sm" data-tool="color-toolkit"><i data-feather="droplet" class="mr-3 w-4 h-4"></i> 颜色工具包</a></li>
                </ul>
            </div>

            <!-- Main Content -->
            <div class="md:w-3/4 p-8">
                <div id="main-content">
                    <!-- 动态内容区域 -->
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="bg-gray-100 py-8 mt-12">
    <div class="container mx-auto px-4 text-center text-gray-600">
        <p>© 2025 DevTools. 所有工具免费使用。</p>
        <div class="flex justify-center space-x-4 mt-4">
            <a href="#" class="text-gray-600 hover:text-gray-900">关于</a>
            <a href="#" class="text-gray-600 hover:text-gray-900">反馈</a>
            <a href="#" class="text-gray-600 hover:text-gray-900">隐私政策</a>
        </div>
    </div>
</footer>

<!-- JavaScript 模块 -->
<script src="assets/js/utils.js"></script>

<!-- 工具逻辑模块 -->
<script src="assets/js/tools/sql-generator.js"></script>
<script src="assets/js/tools/json-formatter.js"></script>
<script src="assets/js/tools/base64-encoder.js"></script>
<script src="assets/js/tools/timestamp-converter.js"></script>
<script src="assets/js/tools/url-encoder.js"></script>
<script src="assets/js/tools/hash-generator.js"></script>
<script src="assets/js/tools/jwt-parser.js"></script>
<script src="assets/js/tools/sql-formatter.js"></script>
<script src="assets/js/tools/text-deduplicator.js"></script>
<script src="assets/js/tools/uuid-generator.js"></script>
<script src="assets/js/tools/password-generator.js"></script>
<script src="assets/js/tools/text-diff.js"></script>
<script src="assets/js/tools/rmb-converter.js"></script>
<script src="assets/js/tools/qr-code.js"></script>
<script src="assets/js/tools/http-status.js"></script>
<script src="assets/js/tools/regex-tester.js"></script>
<script src="assets/js/tools/color-toolkit.js"></script>
<script src="assets/js/tools/css-formatter.js"></script>
<script src="assets/js/tools/markdown-preview.js"></script>
<script src="assets/js/tools/code-formatter.js"></script>
<script src="assets/js/tools/api-tester.js"></script>
<script src="assets/js/tools/xml-formatter.js"></script>

<!-- 核心架构模块 -->
<script src="assets/js/core/router.js"></script>
<script src="assets/js/core/navigation.js"></script>
<script src="assets/js/core/renderer.js"></script>

<!-- 工具渲染器模块 -->
<script src="assets/js/renderers/json-formatter.js"></script>
<script src="assets/js/renderers/sql-generator.js"></script>
<script src="assets/js/renderers/base64-encoder.js"></script>
<script src="assets/js/renderers/timestamp-converter.js"></script>
<script src="assets/js/renderers/url-encoder.js"></script>
<script src="assets/js/renderers/hash-generator.js"></script>
<script src="assets/js/renderers/jwt-parser.js"></script>
<script src="assets/js/renderers/sql-formatter.js"></script>
<script src="assets/js/renderers/text-deduplicator.js"></script>
<script src="assets/js/renderers/uuid-generator.js"></script>
<script src="assets/js/renderers/password-generator.js"></script>
<script src="assets/js/renderers/text-diff.js"></script>
<script src="assets/js/renderers/rmb-converter.js"></script>
<script src="assets/js/renderers/qr-code.js"></script>
<script src="assets/js/renderers/http-status.js"></script>
<script src="assets/js/renderers/regex-tester.js"></script>
<script src="assets/js/renderers/color-toolkit.js"></script>
<script src="assets/js/renderers/css-formatter.js"></script>
<script src="assets/js/renderers/markdown-preview.js"></script>
<script src="assets/js/renderers/code-formatter.js"></script>
<script src="assets/js/renderers/api-tester.js"></script>
<script src="assets/js/renderers/xml-formatter.js"></script>

<!-- 主应用模块 -->
<script src="assets/js/main.js"></script>

<!-- 浮动联系按钮 -->
<div class="fixed bottom-8 right-8 z-50">
    <div class="group relative">
        <!-- 主按钮 -->
        <button id="contact-btn" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full p-4 shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-300">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
            </svg>
        </button>

        <!-- 展开的联系方式 -->
        <div id="contact-panel" class="hidden absolute bottom-16 right-0 bg-white rounded-lg shadow-2xl p-4 w-64 border border-gray-200">
            <div class="text-center mb-3">
                <h3 class="font-semibold text-gray-800">联系站长</h3>
                <p class="text-xs text-gray-500 mt-1">有问题随时联系我</p>
            </div>

            <div class="space-y-2">
                <!-- QQ -->
                <div class="flex items-center space-x-3 p-3 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer group/item"
                     onclick="copyQQ()">
                    <div class="bg-blue-500 rounded-lg p-2 group-hover/item:scale-110 transition-transform">
                        <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M21.395 15.035a39.548 39.548 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a38.97 38.97 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.835 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673z"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-gray-900">QQ咨询</div>
                        <div class="text-xs text-gray-500">563241175</div>
                    </div>
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                    </svg>
                </div>

                <!-- 微信 -->
                <div class="flex items-center space-x-3 p-3 rounded-lg hover:bg-green-50 transition-colors cursor-pointer group/item"
                     onclick="copyWechat()">
                    <div class="bg-green-500 rounded-lg p-2 group-hover/item:scale-110 transition-transform">
                        <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-5.523 3.157-6.997 1.306-.637 2.754-.958 4.2-.958.02 0 .039.003.059.003-.135-3.312-3.703-5.68-8.227-5.68zm-3.639 3.918a1.155 1.155 0 1 1 0 2.31 1.155 1.155 0 0 1 0-2.31zm5.958 0a1.155 1.155 0 1 1 0 2.31 1.155 1.155 0 0 1 0-2.31z"/>
                            <path d="M23.035 11.803c0-3.425-3.124-6.204-6.969-6.204-3.847 0-6.97 2.779-6.97 6.204 0 3.426 3.123 6.205 6.97 6.205a7.58 7.58 0 0 0 2.38-.384.71.71 0 0 1 .6.083l1.591.933c.056.033.117.045.179.045.133 0 .241-.112.241-.25 0-.06-.023-.12-.038-.177l-.326-1.244a.488.488 0 0 1 .178-.55 5.699 5.699 0 0 0 2.164-4.66zm-9.892-1.169a.966.966 0 1 1 0-1.932.966.966 0 0 1 0 1.932zm4.598 0a.966.966 0 1 1 0-1.932.966.966 0 0 1 0 1.932z"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-medium text-gray-900">微信咨询</div>
                        <div class="text-xs text-gray-500">vip0107</div>
                    </div>
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                    </svg>
                </div>
            </div>

            <div class="mt-3 pt-3 border-t border-gray-200">
                <p class="text-xs text-gray-500 text-center">点击即可复制联系方式</p>
            </div>
        </div>
    </div>
</div>

<!-- 复制成功提示 -->
<div id="copy-toast" class="hidden fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2">
    <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
    </svg>
    <span id="toast-message">复制成功</span>
</div>

<style>
    /* 浮动按钮动画 */
    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    #contact-btn {
        animation: float 3s ease-in-out infinite;
    }

    #contact-btn:hover {
        animation: none;
    }

    /* 联系面板动画 */
    #contact-panel {
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Toast 提示动画 */
    #copy-toast {
        animation: toastIn 0.3s ease-out;
    }

    @keyframes toastIn {
        from {
            opacity: 0;
            transform: translate(-50%, -20px);
        }
        to {
            opacity: 1;
            transform: translate(-50%, 0);
        }
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .fixed.bottom-8.right-8 {
            bottom: 1rem;
            right: 1rem;
        }

        #contact-panel {
            width: calc(100vw - 2rem);
            right: -0.5rem;
        }
    }
</style>

<script>
    // 浮动按钮交互
    document.addEventListener('DOMContentLoaded', function() {
        const contactBtn = document.getElementById('contact-btn');
        const contactPanel = document.getElementById('contact-panel');

        contactBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            contactPanel.classList.toggle('hidden');
        });

        // 点击其他地方关闭面板
        document.addEventListener('click', function(e) {
            if (!contactPanel.contains(e.target) && !contactBtn.contains(e.target)) {
                contactPanel.classList.add('hidden');
            }
        });
    });

    // 显示复制提示
    function showToast(message) {
        const toast = document.getElementById('copy-toast');
        const toastMessage = document.getElementById('toast-message');

        toastMessage.textContent = message;
        toast.classList.remove('hidden');

        setTimeout(() => {
            toast.classList.add('hidden');
        }, 2000);
    }

    // 复制函数
    function copyToClipboard(text, successMessage) {
        // 现代浏览器方法
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                showToast(successMessage);
            }).catch(function() {
                // 降级方案
                fallbackCopy(text, successMessage);
            });
        } else {
            // 降级方案
            fallbackCopy(text, successMessage);
        }
    }

    // 降级复制方案
    function fallbackCopy(text, successMessage) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.top = '0';
        textArea.style.left = '0';
        textArea.style.width = '2em';
        textArea.style.height = '2em';
        textArea.style.padding = '0';
        textArea.style.border = 'none';
        textArea.style.outline = 'none';
        textArea.style.boxShadow = 'none';
        textArea.style.background = 'transparent';

        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
            const successful = document.execCommand('copy');
            if (successful) {
                showToast(successMessage);
            } else {
                showToast('复制失败，请手动复制');
            }
        } catch (err) {
            showToast('复制失败，请手动复制');
        }

        document.body.removeChild(textArea);
    }

    // 复制QQ号
    function copyQQ() {
        const qqNumber = '563241175';
        copyToClipboard(qqNumber, 'QQ号已复制: ' + qqNumber);
    }

    // 复制微信号
    function copyWechat() {
        const wechatId = 'vip0107';
        copyToClipboard(wechatId, '微信号已复制: ' + wechatId);
    }

    // ESC键关闭面板
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            const contactPanel = document.getElementById('contact-panel');
            contactPanel.classList.add('hidden');
        }
    });
</script>
</body>
</html>